<template>
  <div class="all">
    <div class="top">
      <header>
        <div class="div">
          <img src="../../../assets/返回.png" @click="back()" alt="">
          <span class="solid" @click="back()" >上一步</span>
        </div>
        <div class="div">
          <span>远程会诊</span>
        </div>
        <div class="div">
          <span class="solid" @click="next()">下一步</span>
        </div>
      </header>
      <div class="menu">
        <el-steps :active="menuIndex" align-center>
          <el-step title="" v-for="(item, index) in ( type == 2 ? menuList2 : type== 5 ? menuList5 : menuList2)" :key="index"
                   @click.native="changeMenu(index)"
                   process-status="success"
                   :description="item.title">
            <template #icon>
              <div v-if="menuIndex >= index" style="width: 15px;height: 15px;">
                <img src="../../../assets/步骤选择.png" style="width: 15px;height: 15px;" alt="">
              </div>
              <div v-else style="width: 6px;height: 15px;background: #1DA4F2;display: flex;align-items: center;justify-content: center">
                <a style="width: 6px;height: 6px;border-radius: 50%;background: white;display: flex;position: absolute;"></a>
              </div>
            </template>
          </el-step>
        </el-steps>
      </div>
    </div>
    <div class="content">
      <div class="peopleDiv" @click.stop="selectPeople(item.PATIENT_USER_ID, index)"
           v-for="(item, index) in peopleList"
           :key="index"
           v-show="PATIENT_USER_ID !== item.PATIENT_USER_ID"
      >
        <div class="peopleLeft">
          <img class="photo" v-if="item.SEX == 1" src="../../../assets/男-被服务@2x.png" alt="">
          <img class="photo" v-else-if="item.SEX == 2" src="../../../assets/女-被服务@2x.png" alt="">
        </div>
        <div class="peopleContent">
          <p>
            <span class="name">{{item.name}}</span>
            <span class="age">{{item.age}}岁</span>
            <!--              0本人 1配偶 2父母 3子女 4其他-->
            <button v-show="item.TIPS == 0" class="biaoqian">本人</button>
            <button v-show="item.TIPS == 1" class="biaoqian biaoqianBlue">配偶</button>
            <button v-show="item.TIPS == 2" class="biaoqian biaoqianBlue">父母</button>
            <button v-show="item.TIPS == 3" class="biaoqian biaoqianBlue">子女</button>
            <button v-show="item.TIPS == 4" class="biaoqian biaoqianBlue">其他</button>
          </p>
          <p class="phone">手机号: {{item.phone}}</p>
        </div>
        <div class="peopleRight">
          <img v-if="Plist.indexOf(item.PATIENT_USER_ID) === -1" src="../../../assets/蓝未选择.png" alt="">
          <img v-else src="../../../assets/题目选择.png" alt="">
        </div>
      </div>
    </div>
    <van-dialog v-model="writeShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="即将进入支付页面，请确认您已填写的信息是否正确？"
                @confirm="writeConfirm()"
                show-cancel-button>
    </van-dialog>
    <div v-show="isLoading"
         style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;position: absolute;top: 0;background: rgba(0, 0, 0, 0.5)" >
      <van-loading size="24px" type="spinner" color="#fff">订单生成中...</van-loading>
    </div>
  </div>
</template>

<script>
import {Toast} from 'vant'
export default {
  name: 'ChooseAttendants',
  data () {
    return {
      type: Number(this.$route.query.type),
      menuIndex: 3,
      menuList2: [
        {
          title: '选择医生',
          url: '/first'
        },
        {
          title: '预约信息',
          url: '/tuWenPrice'
        },
        {
          title: '咨询准备',
          url: '/second'
        },
        {
          title: '选择参与人',
          url: ''
        },
        {
          title: '费用支付',
          url: '/third'
        }
      ],
      menuList5: [
        {
          title: '选择医生',
          url: '/first'
        },
        {
          title: '预约信息',
          url: '/tuWenPrice'
        },
        {
          title: '咨询准备',
          url: '/second'
        },
        {
          title: '选择陪诊人',
          url: ''
        },
        {
          title: '费用支付',
          url: '/third'
        }
      ],
      // menuList: ['选择医生', '选择服务', '选择咨询人', '描述病情', '费用支付'],
      peopleList: [],
      PATIENT_USER_ID: this.$route.query.PATIENT_USER_ID, // 当前选择的被服务人userid
      Plist: [],
      writeShow: false,
      isLoading: false
    }
  },
  mounted () {
    this.getPeople()
    // if (sessionStorage.getItem('DATA') !== null) {
    //   let data = JSON.parse(sessionStorage.getItem('DATA'))
    //   if (data.Plist !== null && data.Plist !== undefined) {
    //     console.log(data.Plist)
    //     for (let i in data.Plist) {
    //       this.selectPeople(data.Plist[i].partake_user_id, i)
    //     }
    //   }
    // }
  },
  methods: {
    writeConfirm () {
      let selectPeopleList = []
      for (let i in this.Plist) {
        var okk = {
          partake_user_id: this.Plist[i]
        }
        selectPeopleList.push(okk)
      }
      this.writeShow = false
      this.isLoading = true
      var data = JSON.parse(sessionStorage.getItem('DATA'))
      data.Plist = selectPeopleList
      sessionStorage.setItem('DATA', JSON.stringify(data))
      if (sessionStorage.getItem('order') !== null) {
        this.$router.push({path: '/third', query: {'type': this.type}})
      } else {
        let obj = {
          'type': data.type, // '咨询类型 1:图文咨询;2:视频咨询',
          'doc_user_id': data.doc_user_id, // '医生ID',
          'illness_desc': data.illness_desc, // 病情描述
          'doc_advise': data.doc_advise,
          'doc_amount_type': data.doc_amount_type, // 订单价格类型
          'amount': data.amount, // 咨询订单价格
          'is_doc_medical': data.is_doc_medical, // 是否需要医生指导用药 0:否;1:是
          'is_hos_visit': data.is_hos_visit, // 是否曾到医疗机构就诊 0:否;1:是
          'Iimg': data.Iimg, // 图片集合 // data.Iimg
          'Clist': data.Clist, // data.Clist
          'Jlist': data.Jlist, // data.Jlist
          'patient_user_id': data.patient_user_id, // 被服务id
          'doc_amount_name': data.doc_amount_name, // 项目名称
          'doc_amount_duration': data.doc_amount_duration, // 时长
          schedule_id: data.schedule_id, // 排班id
          book_date: data.book_date,
          book_time_start: data.book_time_start,
          book_time_end: data.book_time_end,
          Plist: selectPeopleList,
          Olist: [] // 权限
        }
        if (data.weight !== '' && data.weight !== null && data.weight !== undefined) {
          obj.weight = data.weight
        } else {
        }
        this.$http.saveInquary(obj)
          .then(res => {
            console.log(res)
            if (res.data.status === 'success') {
              this.isLoading = false
              sessionStorage.setItem('order', JSON.stringify(res.data.data))
              this.$router.push({path: '/third', query: {'type': this.type}})

              // 清空指定对象的聊天信息  clearChatMessage
              // 参数：指定对象的userid（医生id）   生成订单执行
              if (sessionStorage.getItem('sys') === 'ANDROID') {
                window.WebViewJavascriptBridge.callHandler('clearChatMessage', data.doc_user_id, function (responseData) {})
              }
            } else {
              Toast(res.data.msg)
            }
            this.isLoading = false
          })
          .catch(err => {
            console.log(err)
            Toast('请求错误')
          })
      }
    },
    // 下一步
    next () {
      this.writeShow = true
    },
    // 选择陪诊人   选择参与人
    selectPeople (PATIENT_USER_ID, index) {
      if (this.type === 5) {
        if (this.Plist[index] === PATIENT_USER_ID) {
          this.Plist.splice(index, 1)
        } else {
          this.$set(this.Plist, index, PATIENT_USER_ID)
        }
      } else if (this.type === 2) {
        if (this.Plist[index] === PATIENT_USER_ID) {
          this.Plist = []
        } else {
          this.Plist = []
          this.$set(this.Plist, index, PATIENT_USER_ID)
        }
      }
    },
    // 获取被服务人信息
    getPeople () {
      this.$http.findPatient()
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.peopleList = res.data.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击导航条
    changeMenu (index) {
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    }
  },
  destroyed () {
    let selectPeopleList = []
    for (let i in this.Plist) {
      var okk = {
        partake_user_id: this.Plist[i]
      }
      selectPeopleList.push(okk)
    }
    var data = JSON.parse(sessionStorage.getItem('DATA'))
    data.Plist = selectPeopleList
    sessionStorage.setItem('DATA', JSON.stringify(data))
  }
}
</script>

<style scoped>
.all{
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #FAF9FE;
}
.top{
  position: sticky;
  top: 0;
  background: white;
}
header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  font-family: "PingFang SC";
}
.menu{
  width: 100%;
  height: 60px;
  background: #1DA4F2;
  box-shadow: 0px 1px 0px 0px #E5E5E5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow:hidden;
}
.div{
  width: 33%;
  font-size: 15px;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.div:nth-child(1) img{
  width: 7px;
  height: 13px;
  margin: 0 5px 0 15px;
}
.div:nth-child(2){
  justify-content: center;
}
.div:nth-child(3){
  justify-content: flex-end;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.solid{
  color: #1DA4F2;
}
/*/ 选择框 开始样式/*/
/deep/ .el-steps--horizontal{
  width: 105%;
}
/deep/ .el-step.is-center .el-step__description{
  padding: 0;
}
/deep/ .el-step__description{
  margin: 0;
  font-size: 13px;
}
/deep/ .el-step__icon{
  width: auto;
  height: auto;
}
/deep/ .el-step__icon.is-text{
  border: none;
}
/deep/ .is-finish,
/deep/ .el-step__description.is-process{
  color: #fff;
}
/deep/ .el-step__description.is-finish{
  color: white !important;
}
/deep/ .el-step__description.is-wait{
  color: rgba(255, 255, 255, 0.7);
}
/deep/ .el-step__head.is-finish{
  border-color: #fff;
}
/deep/ .el-step__head.is-wait{
  border-color: transparent !important;
}
/deep/ .el-step__line{
  border-color: transparent !important;
}
/deep/ .el-step.is-horizontal .el-step__line{
  height: 1px;
  /*top:7px;*/
  top: 35%;
}
/deep/ .el-step__line{
  background: white;
}
/*/ 选择框 结束样式/*/

.content{
  overflow: auto;
}
.peopleDiv {
  width: 95%;
  height: 60px;
  overflow: auto;
  display: flex;
  justify-content: space-between;
  /*padding: 5px;*/
  box-sizing: border-box;
  border-bottom: 1px solid #E5E5E5;
  margin: 10px auto;
  background: #fff;
  border-radius: 5px;
  padding: 0 10px;
  box-sizing: border-box;
}
.peopleDiv:last-child{
  margin-bottom: 60px!important;
}
.peopleLeft {
  display: flex;
  align-items: center;
}
.peopleContent {
  width: 85%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.peopleContent p{
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
}
.peopleContent p span{
  margin-right: 8px;
}
.name{
  font-size: 15px;
}
.age{
  font-size: 11px;
  color: #999;
}
.phone{
  font-size: 13px;
  color: #999;
}
.biaoqian{
  width: 30px;
  height: 20px;
  background: #5789ef;
  color: white;
  font-size: 11px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
}
.biaoqianBlue{
  background: #8ED4FC;
}
.peopleRight{
  display: flex;
  align-items: center;
  justify-content: center;
}
.peopleRight img {
  width: 14px;
  height: 14px;
}
.photo{
  width: 40px;
  height: 40px;
}
.peopleBottom {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 10px;
  font-family: "PingFang SC";
  font-weight: bold;
}
.peopleBottom button{
  width: 95%;
  height: 44px;
  background: linear-gradient(90deg, #1DA3F2 0%, #1DC7F2 100%);
  border-radius: 22px;
  color: white;
  border: none;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.peopleBottom button img{
  width: 15px;
  height: 15px;
  margin-right: 8px;
}
/*/ 选择框 结束样式/*/
/deep/ .van-dialog__header--isolated {
  padding: 24px 10px;
}
</style>
